<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="apparatus Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/jquery-1.11.1.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
<!---End-smoth-scrolling---->
 
</head>
<body>
<!----header-banner--->
		<div class="header">
			<div class="container">
				<div class="header-top">
					<div class="logo">
						<a href="index.html">appara<span>tus</span></a>
					</div>
						<div class="social-icons">
							<a href="#"><i class="icon1"></i></a>
								<a href="#"><i class="icon2"></i></a>
										<a href="#"><i class="icon3"></i></a>
												<a href="#"><i class="icon4"></i></a>
						</div>	
							<div class="clearfix"></div>
				</div>
				<div class="top-menu">
					<span class="menu"><img src="images/menu.png" alt=""/>  </span>
						<ul>
							<li><a href="index.html" class="active">home</a></li>
								<li><a href="about.html">about</a></li>
									<li><a href="services.html">services</a></li>
										<li><a href="gallery.html">gallery</a></li>
											<li><a href="blog.html">blog</a></li>
												<li><a href="contact.html">Contact</a></li>
												<!-- script for menu -->
							<script>
							 $("span.menu").click(function(){
							 $(".top-menu ul").slideToggle("slow" , function(){
							 });
							 });
							 </script>
							<!-- //script for menu -->

						<div class="clearfix"></div>
					</ul>
				</div>
				<div class="index-banner">
					<div class="wmuSlider example1">
						<div class="wmuSliderWrapper">
							<article style="position: absolute; width: 100%; opacity: 0;"> 
								<div class="banner-wrap">
				   	       			<div class="banner_center">
										<h1>Lorem ipsum dolor sit amet</h1> 
											<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.</p>
									</div>
								</div>
							</article>
				   <article style="position: relative; width: 100%; opacity: 1;"> 
				   	   	<div class="banner-wrap">
				   	      <div class="banner_center">
										<h1>Ipsum Lorem dolor sit amet</h1> 
											<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.</p>
									</div>
				   		  </div>
				   </article>
				   <article style="position: absolute; width: 100%; opacity: 0;">
				   	  	<div class="banner-wrap">
				   	       <div class="banner_center">
										<h1>Lorem ipsum dolor sit amet</h1> 
											<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.</p>
									</div>
				   		 </div>
					 </article>
					 <ul class="wmuSliderPagination">
                	<li><a href="#" class="">0</a></li>
                	<li><a href="#" class="">1</a></li>
                	<li><a href="#" class="">2</a></li>
                </ul>

				 </div>
				
            </div>

	</div>
	<script src="js/jquery.wmuSlider.js"></script> 
			  <script>
       			$('.example1').wmuSlider();         
   		     </script> 	

			</div>
		</div>
			<div class="banner-bottom">
				<div class="container">
				<ul id="flexiselDemo3">
				 <li>
					<div class="biseller-column">
							<div class="banner-grid">
							  <img src="images/p1.jpg" class="img-responsive" alt="/">
							</div>
					</div>
				</li>
				<li>
					<div class="biseller-column">
							<div class="banner-grid">
							    <img src="images/p2.jpg" class="img-responsive" alt="/">
							</div>
						</div>
				</li>
				<li>
					<div class="biseller-column">
							<div class="banner-grid">
							<img src="images/p3.jpg" class="img-responsive" alt="/">
							</div>
					</div>
				</li>
				<li>
					<div class="biseller-column">
							<div class="banner-grid">
							 <img src="images/p4.jpg" class="img-responsive" alt="/">
						</div>
					</div>
				</li>
				<li>
					<div class="biseller-column">
							<div class="banner-grid">
							 <img src="images/p19.jpg" class="img-responsive" alt="/">
						</div>
					</div>
				</li>
	     	</ul>
		  </div>
			<script type="text/javascript">
				 $(window).load(function() {
					$("#flexiselDemo3").flexisel({
						visibleItems:3,
						animationSpeed: 1000,
						autoPlay: true,
						autoPlaySpeed: 3000,    		
						pauseOnHover: true,
						enableResponsiveBreakpoints: true,
				    	responsiveBreakpoints: { 
				    		portrait: { 
				    			changePoint:480,
				    			visibleItems:2
				    		}, 
				    		landscape: { 
				    			changePoint:640,
				    			visibleItems:2
				    		},
				    		tablet: { 
				    			changePoint:768,
				    			visibleItems:3
				    		}
				    	}
				    });
				    
				});
			   </script>
			   <script type="text/javascript" src="js/jquery.flexisel.js"></script>
				</div>
				<div class="welcome-top">
				<div class="container">
				   <h3>Welcome !</h3>
				   <h6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s around the world. </h6>
				   <p>Dolore magnaorem ipsum dolor ser adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore set.sit amet consectetuer Aadipiscing elit, sed diam nonummy. nonummy nibh euismod tincidunt ut laoreet dolore magna.orem ipsum dolor ser adipiscing elit, sed diam nonummy. Dolore magnaorem ipsum dolor ser adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore set.sit amet consectetuer Aadipiscing elit, sed diam nonummy. nonummy nibh euismod tincidunt ut laoreet dolore magna.orem ipsum dolor ser adipiscing elit, sed diam nonummy.</p>
			</div>
		</div>
		<!-- events -->
	<div class="events">
		<div class="container">
		<div class="event-grids">
			<div class="col-md-4 upcoming">
				<h3>Upcoming Events</h3>
				<div class="upcoming1">
				<div class="family">
					<div class="twenty">
						<h4>20</h4>
						<p>JULY</p>
					</div>
					<div class="sunday">
						<h5>Morbi nunc odio</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.It has survived not only five centuries </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="family">
					<div class="twenty">
						<h4>30</h4>
						<p>AUG</p>
					</div>
					<div class="sunday">
						<h5>Morbi nunc odio</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.It has survived not only five centuries </p>
					</div>
					
						<div class="clearfix"> </div>
				</div>
				<div class="family">
					<div class="twenty">
						<h4>28</h4>
						<p>NOV</p>
					</div>
					<div class="sunday">
						<h5>Morbi nunc odio</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.It has survived not only five centuries</p>
					</div>
					
						<div class="clearfix"> </div>
				</div>
				</div>
			</div>
			<div class="col-md-8 furniture">
				<h3>furniture</h3>
				<div class="furniture-girds">
					<div class="col-md-6 furniture-grid">
					<a href="#" class="mask">
					<div class="fur1">
					  <img src="images/f1.jpg" class="img-responsive zoom-img" alt="/">
						</div></a>
					<a href="#" class="mask">
					<div class="fur2">
					  <img src="images/f2.jpg" class="img-responsive zoom-img" alt="/">
						</div></a>
				</div>
				<div class="col-md-6 furniture-grid">
				<a href="#" class="mask">
					<div class="fur1">
					  <img src="images/f3.jpg" class="img-responsive zoom-img" alt="/">
						</div></a>
					<a href="#" class="mask">
					<div class="fur2">
					  <img src="images/f4.jpg" class="img-responsive zoom-img" alt="/">
						</div></a>
				</div>
					<div class="clearfix"></div>
			</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
	<!--events -->
	<div class="team">
	   <div class="container">
		 <div class="second-head">
			<h3>Volunteers</h3>
		  </div>
		  <div class="team-top">
			<div class="col-md-3 team-grid">
				<img src="images/t1.jpg" class="img-responsive" alt="/">
				<h4>Kimberly Thompson</h4>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					<ul class="social-contacts">
						<li><a href="#" title=""><img src="images/facebook.jpg" alt=""></a></li>
						<li><a href="#" title=""><img src="images/gplus.jpg" alt=""></a></li>
						<li><a href="#" title=""><img src="images/pinterest.jpg" alt=""></a></li>
					</ul>
				</div>
				<div class="col-md-3 team-grid">
					<img src="images/t2.jpg" class="img-responsive" alt="/">
					<h4>Rico Massimo</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<ul class="social-contacts">
							<li><a href="#" title=""><img src="images/facebook.jpg" alt=""></a></li>
							<li><a href="#" title=""><img src="images/gplus.jpg" alt=""></a></li>
							<li><a href="#" title=""><img src="images/pinterest.jpg" alt=""></a></li>
						</ul>
				</div>
				<div class="col-md-3 team-grid">
					<img src="images/t3.jpg" class="img-responsive" alt="/">
					<h4>Uku Mason</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<ul class="social-contacts">
							<li><a href="#" title=""><img src="images/facebook.jpg" alt=""></a></li>
							<li><a href="#" title=""><img src="images/gplus.jpg" alt=""></a></li>
							<li><a href="#" title=""><img src="images/pinterest.jpg" alt=""></a></li>
						</ul>
				</div>
				<div class="col-md-3 team-grid">
					<img src="images/t4.jpg" class="img-responsive" alt="/">
					<h4>Uku Loona</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<ul class="social-contacts">
							<li><a href="#" title=""><img src="images/facebook.jpg" alt=""></a></li>
							<li><a href="#" title=""><img src="images/gplus.jpg" alt=""></a></li>
							<li><a href="#" title=""><img src="images/pinterest.jpg" alt=""></a></li>
						</ul>
				</div>
			 <div class="clearfix"> </div>
		</div>
	</div>
 </div>
		<div class="about">
			<div class="container">
				<div class="about-grids">
					<div class="col-md-5 about-grid">
						<h3>our management</h3>
							<div class="about-info">
								<h4>Casaerta voluptatem adminima veniam</h4>
									<p>Ut pharetra aue nec augentumonec in velit vel ipsum auliypam elit magna Donec porta diam eu massa. Quisue diam lorem intdum vitaapibus ac scelerisque.</p>
										<h4>Ut pharetra augentumonec velit ipsum</h4>
											<p>Ut pharetra aue nec augentumonec in velit vel ipsum auliypam elit magna Donec porta diam eu massa. Quisue diam lorem intdum vitaapibus ac scelerisque.</p>
												<h4>Casaerta voluptatem adminima veniam</h4>
													<p>Ut pharetra aue nec augentumonec in velit vel ipsum auliypam elit magna Donec porta diam eu massa. Quisue diam lorem intdum vitaapibus ac scelerisque.</p>
							</div>
					</div>
					<div class="col-md-7 about-grid3">
					<div class="col-md-6 about-grid1">
					<h3>info& advice</h3>
						<img src="images/p6.jpg" class="img-responsive" alt="/">
						 <h4>Casaerta voluptatem uno </h4>
							<p>Aliquam leote llus dolor dapibus eget elementum vel curss eleifend elit. Aenean aucto. wisi et urna. Aliqat. volutpat. Duisac lacuestibulum libero nisl porta scelerie</p>
					</div>
					<div class="col-md-6 about-grid1">
					<h3>about us</h3>
						<img src="images/p5.jpg" class="img-responsive" alt="/">
						 <h4>Casaerta voluptatem uno </h4>
							<p>Aliquam leote llus dolor dapibus eget elementum vel curss eleifend elit. Aenean aucto. wisi et urna. Aliqat. volutpat. Duisac lacuestibulum libero nisl porta scelerie</p>
					</div>
					<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="footer-section">
						<div class="container">
							<div class="footer-top">
						<p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
									</div>
							<script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>
			</div>

</body>
</html> 